 <template>
   <div class="home_middle w-100% h-100%">
    <MCard class=" middle_top">
        <template #header>
          <span>{{ t('home.TOD_information_label') }}</span>
        </template>
        <div class="grid grid-cols-3 gap-2">
      <div v-for="(_,key) in todLabel" :key="key" class="whitespace-nowrap flex flex-col gap-1 cursor-pointer">
    <div class="text-#FFFFFF text-size-13px">{{ todLabel[key].label }}</div>
    <el-tooltip 
      :content="String(todLabel[key].isCustom 
        ? (todInfo[key] ? t('home.location_status_label') : t('home.unlocation_status_label'))
        : todInfo[key])"
      placement="top"
      effect="light">
      <div class="text-#00AAFF text-size-15px ">
        <div v-if="todLabel[key].isCustom" :class="todInfo[key]?'normal':''">
          {{ todInfo[key]?t('home.location_status_label'):t('home.unlocation_status_label') }}
        </div>
        <div v-else class="text-size-15px">
           <div v-if="todLabel[key].longitudeLabel">{{ todInfo[key] }}</div>
           <div v-else>{{ todInfo[key] }}</div>
        </div>
      </div>
    </el-tooltip>
  </div>
</div>
    </MCard> 
    <SatelliteManage  :lonList="lonList"/>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
 export default defineComponent({
   name: 'HomeMiddle',
 })
 </script>
<script setup  lang="ts">
import { useI18n } from 'vue-i18n'
import { HomeApi } from '@/api/home'
import {formatDateToHHMMSS} from '@/utils/computedUtils'
import { useTodStore } from '@/stores/todStore'
import { useUserInfoStore } from '@/stores/userInfo'
import { getWebSocketInstance } from '@/utils/websocketExample'
const todStore  = useTodStore()
const userInfoStore = useUserInfoStore()
const { deviceType } = storeToRefs(userInfoStore)
const { t } = useI18n()
const todInfo = ref<any>({
  location_status:true,
  longitude:0,
  latitude:0,
  altitude:0,
  eastward_speed:0,
  northward_speed:0,
  tod_sec:0,
})
// 定义设备类型
const DEVICE_TYPE:any = {
  0:['longitude','latitude','altitude',"tod_sec"],
  1:['longitude','latitude','altitude','eastward_speed','northward_speed','tod_sec'],
  2:['longitude','latitude','altitude','eastward_speed','northward_speed','tod_sec'],
}
// 默认设备
const defaultDevice:any ={
    location_status:{
      label:t('home.location_status_info_label'),
      isCustom:true,
    },
    longitude:{
      label:t('home.longitude_label'),
      isCustom:false,
      longitudeLabel:'',
      EastType:1,
    },
    latitude:{
      label:t('home.latitude_label'),
      isCustom:false,
    },
    altitude:{
      label:t('home.altitude_m_label'),
      isCustom:false,
    },
    eastward_speed:{
      label:t('home.east_speed_label'),
      isCustom:false,
    },
    northward_speed:{
      label:t('home.north_speed_label'),
      isCustom:false,
    },
    tod_sec:{
      label:t('home.tod_sec_label'),
      isCustom:false,
    }
  }
const todLabel = computed(()=>{
  const label = DEVICE_TYPE[deviceType.value]
  return label.reduce((acc:any,item:any)=>{
    acc[item] = defaultDevice[item]
    return acc
  },{})
})
const lonList = ref<any>([])
const refreshTime = ref<number>(0)
let todTimer: number | null = null
async function postTodStatus(data:any) {
  lonList.value.length = 0
  try {
    const { info } = data
    todInfo.value = { ...todInfo.value, ...info }
    todInfo.value.tod_sec = formatDateToHHMMSS(info.tod_sec)
    if(todInfo.value.longitude>0&&todInfo.value.longitude<180){
      todLabel.value.longitude.longitudeLabel = t('home.east_longitude_label')
      todLabel.value.longitude.EastType = 1
    }else{
      todLabel.value.longitude.longitudeLabel = t('home.west_longitude_label')
      todLabel.value.longitude.EastType =2
    }
    todStore.setEastType(todLabel.value.longitude.EastType)
    if (info.longitude && info.latitude && !isNaN(info.longitude) && !isNaN(info.latitude)) {
      todInfo.value.location_status = true
      if (refreshTime.value === 0 || refreshTime.value % 20 === 0) {
        lonList.value.push({
          N: info.latitude,
          E: info.longitude,
          name: ""
        })
      }
    } else {
      if (!todInfo.value.location_status) return
      lonList.value.push({
        N: 38.0458171,
        E: 114.4338723,
        name: ""
      })
      todInfo.value.location_status = false
    }
  } catch (error) {
    console.error('获取TOD状态失败:', error)
    if (refreshTime.value === 0 || refreshTime.value % 20 === 0) {
      lonList.value.length = 0
      lonList.value.push({
        N: 38.0458171,
        E: 114.4338723,
        name: ""
      })
    }
    todInfo.value.location_status = false
  } finally {
    refreshTime.value++
  }
}
/* function scheduleNextTodUpdate() {
  todTimer = window.setTimeout(() => {
    postTodStatus().finally(() => {
      if (todTimer) {
        scheduleNextTodUpdate()
      }
    })
  }, 5000)
} */
const ws = getWebSocketInstance()
ws.on('message',(response:any)=>{
  if(response.cmd === 'ap_tod_status'){
    postTodStatus(response.data)
  }
})
/* onActivated(() => {
  refreshTime.value = 0
  postTodStatus()
  scheduleNextTodUpdate()
})

onDeactivated(() => {
  if (todTimer) {
    clearTimeout(todTimer)
    todTimer = null
  }
}) */
</script>

 <style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/normal.scss';
.home_middle{
    position: relative;
  .middle_top{
    width: calc(100% - 920px);
    height: auto;
    position: absolute;
    left: 50%;
    z-index: 901;
    transform: translateX(-50%);
  }
}
</style>
 